<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#pics{
				margin-top:200px;
				position: relative;
			}
			 img {
				position: absolute;
				border:1px solid #ccc;
				padding:10px;
				background:white;
				z-index:1;
				transition: all 1s;
			 }
			 img:nth-child(1) {
				top: 0px;
				left: 300px;
				transform: rotate(-15deg);
			}
			
			 img:nth-child(2) {
				top: 30px;
				left: 150px;
				transform: rotate(30deg);
			}
			 img:nth-child(3) {
				top: 130px;
				right: 150px;
				transform: rotate(-30deg);
			}
			
			img:nth-child(4) {
				top: -200px;
				right: 450px;
				transform: rotate(-40deg);
			}
			
			img:nth-child(5) {
				top: -200px;
				left: 50px;
				transform: rotate(20deg);
			}
			
			img:nth-child(6) {
				top: -150px;
				right: 50px;
				transform: rotate(-20deg);
			}
			
			img:nth-child(7) {
				top: 50px;
				left: 450px;
				transform: rotate(9deg);
			}
			img:nth-child(8) {
				top: 20px;
				left: 350px;
				transform: rotate(-20deg);
			}
			
			img:nth-child(9) {
				top: -150px;
				right: 250px;
				transform: rotate(20deg);
			}
			
			img:nth-child(odd){
				width:300px;
			}
			img:nth-child(even){
				width:200px;
			}
			img:hover{
				transform: scale(1.5) rotate(0deg);
				z-index:2;
				box-shadow: 5px 5px 5px #ddd;
			}
		</style>
	</head>

	<body>
		<div id="pics">
			<img src="image/1.jpg" />
			<img src="image/2.jpg" />
			<img src="image/3.jpg" />
			<img src="image/4.jpg" />
			<img src="image/5.jpg" />
			<img src="image/6.jpg" />
			<img src="image/7.jpg" />
			<img src="image/8.jpg" />
			<img src="image/9.jpg" />
			<img src="image/10.jpg" />
		</div>
	</body>

</html>